<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>Custom PixieApp Elements &#8212; PixieDust Documentation</title>
    
    <link rel="stylesheet" href="_static/better.css" type="text/css" />
    <link rel="stylesheet" href="_static/pygments.css" type="text/css" />
    <link rel="stylesheet" href="_static/custom.css" type="text/css" />
    
    <script type="text/javascript">
      var DOCUMENTATION_OPTIONS = {
        URL_ROOT:    './',
        VERSION:     '1.0',
        COLLAPSE_INDEX: false,
        FILE_SUFFIX: '.html',
        HAS_SOURCE:  true,
        SOURCELINK_SUFFIX: '.txt'
      };
    </script>
    <script type="text/javascript" src="_static/jquery.js"></script>
    <script type="text/javascript" src="_static/underscore.js"></script>
    <script type="text/javascript" src="_static/doctools.js"></script>
    <link rel="shortcut icon" href="_static/pd_icon.ico"/>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Release Notes" href="releasenotes.html" />
    <link rel="prev" title="Custom HTML Attributes" href="html-attributes-pixieapps.html" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  </head>
  <body role="document">
    <header id="pageheader"><h1><a href="index.html ">
        PixieDust Documentation
    </a></h1></header>  

    <div class="document">
      <div class="documentwrapper">
        <div class="bodywrapper">
          <div class="body" role="main">
            
  <div class="section" id="custom-pixieapp-elements">
<h1>Custom PixieApp Elements<a class="headerlink" href="#custom-pixieapp-elements" title="Permalink to this headline">¶</a></h1>
<div class="section" id="target">
<h2>&lt;target&gt;<a class="headerlink" href="#target" title="Permalink to this headline">¶</a></h2>
<p>Child element to the clickable source element. <code class="docutils literal"><span class="pre">&lt;target&gt;</span></code> can have any of the <a class="reference external" href="html-attributes-pixieapps.html">custom PixieApp HTML attributes</a> defined above. For example:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span><span class="o">&lt;</span><span class="n">button</span> <span class="nb">type</span><span class="o">=</span><span class="s2">&quot;button&quot;</span><span class="o">&gt;</span><span class="n">Multiple</span> <span class="n">Targets</span>
      <span class="o">&lt;</span><span class="n">target</span> <span class="n">pd_target</span><span class="o">=</span><span class="s2">&quot;target{{prefix}}&quot;</span>
          <span class="n">pd_entity</span>
          <span class="n">pd_options</span><span class="o">=</span><span class="s2">&quot;handlerId=dataFrame&quot;</span><span class="o">/&gt;</span>
      <span class="o">&lt;</span><span class="n">target</span> <span class="n">pd_target</span><span class="o">=</span><span class="s2">&quot;target2{{prefix}}&quot;</span>
          <span class="n">pd_entity</span>
          <span class="n">pd_options</span><span class="o">=</span><span class="s2">&quot;keyFields=zone;aggregation=AVG;handlerId=barChart;valueFields=unique_customers;rowCount=100/&quot;</span><span class="o">&gt;</span>
<span class="o">&lt;/</span><span class="n">button</span><span class="o">&gt;</span>
</pre></div>
</div>
</div>
<div class="section" id="pd-script">
<h2>&lt;pd_script&gt;<a class="headerlink" href="#pd-script" title="Permalink to this headline">¶</a></h2>
<p>Contains Python code as child text. It has the same meaning as the pd_script attribute, except that it can contain multiple lines of Python code. Because indentation is important in Python, be careful to not have empty space in your code&#8212;regardless of the indentation level of your HTML markup. For example:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span>  <span class="o">&lt;</span><span class="n">pd_script</span><span class="o">&gt;</span>
<span class="kn">import</span> <span class="nn">json</span>
<span class="nb">print</span><span class="p">(</span><span class="n">json</span><span class="o">.</span><span class="n">dumps</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">myJson</span><span class="p">)</span>
  <span class="o">&lt;/</span><span class="n">pd_script</span><span class="o">&gt;</span>
</pre></div>
</div>
</div>
</div>


          </div>
        </div>
      </div>
      <div class="sphinxsidebar" role="navigation" aria-label="main navigation">
        <div class="sphinxsidebarwrapper">
<h3><a href="index.html">Table Of Contents</a></h3>
<ul class="current">
<li class="toctree-l1"><a class="reference internal" href="use.html">Use PixieDust</a></li>
<li class="toctree-l1"><a class="reference internal" href="develop.html">Develop for PixieDust</a></li>
<li class="toctree-l1 current"><a class="reference internal" href="pixieapps.html">PixieApps</a><ul class="current">
<li class="toctree-l2"><a class="reference internal" href="hello-world-pixieapp.html">Hello World PixieApp</a></li>
<li class="toctree-l2"><a class="reference internal" href="reference-pixieapps.html">Reference</a></li>
<li class="toctree-l2"><a class="reference internal" href="html-attributes-pixieapps.html">Custom HTML Attributes</a></li>
<li class="toctree-l2 current"><a class="current reference internal" href="#">Custom PixieApp Elements</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="releasenotes.html">Release Notes</a></li>
</ul>

<div id="searchbox" style="display: none" role="search">
  <h3>Quick search</h3>
    <form class="search" action="search.html" method="get">
      <div><input type="text" name="q" /></div>
      <div><input type="submit" value="Go" /></div>
      <input type="hidden" name="check_keywords" value="yes" />
      <input type="hidden" name="area" value="default" />
    </form>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
        </div>
      </div>
      <div class="clearer"></div>
    </div>
  <footer id="pagefooter">&copy; 2017, IBM.
      Created using <a href="http://sphinx-doc.org/">Sphinx</a>
      1.5.6.

  </footer>

  
  </body>
</html>